<template>
  <div class="documentation">
    <a target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">
      <el-button type="success">文档</el-button>
    </a>
    <a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
      <el-button type="success">GitHub地址</el-button>
    </a>
    <dropdown-menu class="dropdown" :items = articleList :type="'success'">系列文章</dropdown-menu>
  </div>
</template>

<script>
  import DropdownMenu from './DropdownMenu'
  export default {
    name: 'documentation_view',
    components:{DropdownMenu},
    data() {
      return {
        articleList: [
          { title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' },
          { title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' },
          { title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
          { title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
          { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
          { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
        ]
      }
    },
    methods: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .documentation{
    text-align: center;

    .el-button, .dropdown{
      width: 150px;
      height: 60px;
    }

    a{
      display: inline-block;
    }
  }
</style>

